<!--
 * @Author: wujiedong
 * @Date: 2021-09-19 20:19:21
 * @LastEditTime: 2021-11-08 11:09:00
 * @LastEditors: Please set LastEditors
 * @Description: 全局svg图片组件
 * @FilePath: \common-vue\src\components\common\APPIcon.vue
-->
<template>
<!-- $listeners: 可以获取到子组件上面所有事件 -->
  <svg :class="svgClass" v-on="$listeners">
      <use :xlink:href="iconName" style="fill: red;"></use>
  </svg>
</template>

<script>
export default {
  name: 'APPIcon',
  props: {
    iconClass: {
      required: true,
      type: String
    },
    svgClassName: {
      required: true,
      default: ''
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      return this.svgClassName ? `svg-icon ${this.svgClassName}` : 'svg-icon'
    }
  },
  created() {
    console.log('APPIcon created', this.$listeners)
    this.$listeners.todo()
  }
}
</script>

<style scoped lang="less">
.svg-icon{
  width: 100px; // 1em
  height: 100px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
